<!DOCTYPE html>
<html class="x-admin-sm">
  <head>
      {include file="public/static" /}
      <link rel="stylesheet" href="__components__/eleTree/eleTree.css" media="all">
      <style>
          html,body{
            width: 80%;
            margin: 0 auto;
            padding: 1rem;
          }
          .nav{
            position: fixed;
            right: 25px;
            top: calc(50% - 90px);
            background-color:#fff;
            z-index: 100000;
          }
          .nav-title{
            background-color: #F8F8F8;
            padding:0 80px 0 20px;
            margin: 0;
            height: 42px;
            line-height: 42px;
            border-bottom: 1px solid #eee;
          }
          .nav ul{
            padding:10px 0px 10px 35px;
          }
          .nav ul li{
            padding: 5px 0px;
            list-style-type: decimal;
          }
          .nav ul a{
            color: #333;
            font-size: 14px;
            text-decoration: none;
          }

          .eleTree{
            width: 350px;
            /*height: 500px;*/
            border: 1px solid #ccc;
            overflow: hidden;
            /*display: inline-block;*/
          }
          .inp{
            width: 100%;
            line-height: 30px;
          }
          .slideTest{
            margin: 0 10px;
          }
          .met{
            display: none;
            width: 100%;
          }
          .ele4{
            height: 200px;
          }
          .blue{
            color: #01AAED;
          }
          a:hover{
            color: #01AAED;
          }
          .ele5{
            height: auto;
            width: 100%;
            display: none;
            position: absolute;
            top:100%;
            background-color: #fff;
            z-index: 100;
          }
          .layui-btn{
              margin-top: 1rem;
          }
      </style>
  </head>
  
  <body>
    <form class="layui-form layui-form-pane">
        <input type="hidden" id="id" name="id" value="{$info.ag_id}">
        <div class="eleTree ele2" lay-filter="data2"></div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
        </div>
    </form>

    <script>
        /**树形组件获取分类列表*/
        const list = common.getTreeMenuList("{:url('Role/getRuleList')}");
        /**获取到数据后展示*/
        if(list.length > 0){
            //角色拥有的权限
            const rule = "{$info.ag_rules}";
            //字符串打散为数据
            const ruleArr = rule.split(',');
            //显示树状菜单
            layui.config({
                base: "__components__/eleTree/"
            }).use(['jquery','table','eleTree','code','form','layer'], function() {
                let $ = layui.jquery;
                let eleTree = layui.eleTree;
                let form = layui.form, layer = layui.layer;
                //树状菜单配置
                let el2 = eleTree.render({
                    elem: '.ele2',
                    data: list,
                    showCheckbox: true,             //节点是否可被选择
                    defaultExpandAll: true,         //默认展开所有节点
                    defaultCheckedKeys: ruleArr,    //默认展开的节点的 key 的数组
                    checkStrictly: true,            //严格的遵循父子不互相关联的做法
                    showLine: true,                 //是否显示连线
                    checkOnClickNode: true,         //点击节点的时候选中节点
                    expandOnClickNode: false,       //点击节点的时候展开或者收缩节点
                    done: function (data) {
                        //console.log(data)
                    }
                });
                //监听提交
                form.on('submit(add)', function (data) {
                    //发异步，把数据提交给php
                    layer.confirm('确认修改此角色权限吗？', function () {
                        //获取权限的id
                        const ids = el2.getChecked(false,true);
                        const setIds = ids.map(item => item.id);
                        if(setIds.length <= 0){
                            layer.msg("请勾选需要的权限", {icon: 5, time: 1500});
                            return false
                        }
                        const id = document.querySelector("#id").value;
                        const index = layer.load();
                        $.ajax({
                            type: "post",
                            url: "{:url('Role/roleCompetenceFunc')}",
                            data: {ids: setIds, id: id},
                            dataType: 'json',
                            success: function (data) {
                                if (data.status === 1) {
                                    layer.msg(data.info, {icon: 6, time: 1500}, function () {
                                        common.closeWindow();
                                    });
                                } else {
                                    layer.msg(data.info, {icon: 5, time: 1500});
                                }
                                layer.close(index);
                            },
                            error: function (data) {
                                console.log(data);
                                layer.msg("不好意思，出现了一点问题", {icon: 5});
                                layer.close(index);
                            }
                        });
                    });
                    return false;
                });
            });
        }
    </script>
  </body>
</html>